<template>
    <div class="body">
        <div class="noticeBox">
          <div class="noticeBoxTitle">
              公告栏
          </div>
          <hr>
          <div class="notices">
            <div class="noticeTitle">{{notice.noticeTitle[0]}}</div>
            <div class="noticeText">
              {{notice.noticeText[0]}}
            </div>
           </div>

          <div class="notices">
            <div class="noticeTitle">{{notice.noticeTitle[1]}}</div>
            <div class="noticeText">
              {{notice.noticeText[1]}}
            </div>
            </div>
        </div>
        <div class="functionBox">
            <div class="funcTop">
                <div class="funcTopLeft">
                    <div @click="toLibrary" class="functions"><div class="el-icon-s-management icon"></div>图书馆</div>
                    <div @click="toAdmin" class="functions"><div class="el-icon-s-data icon"></div>成绩查询</div>
                    <div @click="toAdmin" class="functions"><div class="el-icon-search icon"></div>课程信息查询</div>
                    <div @click="toAdmin" class="functions"><div class="el-icon-s-comment icon"></div>评教系统</div>
                    <div @click="toAdmin" class="functions"><div class="el-icon-s-release icon"></div>请销假管理</div>
                    <div @click="toAdmin" class="functions"><div class="el-icon-user-solid icon"></div>个人信息管理</div>
                </div>
                <div class="funcTopRight">
                  <div class="noticeBoxTitle" style="height:50px;margin-bottom: 20px">待办事项</div>
                  <div id="root">
                    <div class="todo-container">
                      <div class="todo-wrap">
                        <MyHeader :addToDo="addToDo"></MyHeader>
                        <MyList :todos="todos" :checkToDo="checkToDo" :deleteToDo="deleteToDo"></MyList>
                        <MyFooter :todos="todos" :checkAllToDo="checkAllToDo" :clearAllToDo="clearAllToDo"></MyFooter>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div class="funcBottom">
                <div class="funcBottomLeft">

                  <div class="classHeader">
                    <i class="el-icon-caret-left" @click="decWeek" style="color:white;line-height:30px;font-size:25px"></i>
                    <div>
                      {{weekText}}&nbsp&nbsp&nbsp2020~2021学年第{{term}}学期
                    </div>
                    <i class="el-icon-caret-right" @click="incWeek" style="color:white;line-height:30px;font-size:25px"></i>
                  </div>

                  <div>
                    <el-table
                      :data="tableData"
                      border
                      height="465"
                      :cell-style="{height:'80px'}"
                      :row-style="{height:'80px'}"
                    >
                      <el-table-column
                        prop="Section"
                        :label=weekText
                        width="90"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="Monday"
                        label="星期一"
                        width="100"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="Tuesday"
                        label="星期二"
                        width="100"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="Wednesday"
                        label="星期三"
                        width="100"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="Thursday"
                        label="星期四"
                        width="100"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="Friday"
                        label="星期五"
                        width="100"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="Saturday"
                        label="星期六"
                        width="100"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="Sunday"
                        label="星期日"
                        width="100"
                      >
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
                <div class="funcBottomRight">
                  <div>
<!--                    <form id="search-form">-->
<!--                      <input type="text" id="search-query-nav" class="search-query st-default-search-input" aria-label="搜索">-->
<!--                    </form>-->
                    <div class="weatherBox">
                      <img src="../pages/home/assets/weather.png" alt="天气图标"
                           style="width:50px;height:50px;float:left;margin: 15px">
                      <div class="weatherText">
                        <span style="border-right: 1px solid darkgrey;padding-right:15px">{{weather.city}}</span>
                        <span style="border-right: 1px solid darkgrey;padding-right:15px">{{weather.temp}}</span>
                        <span>{{weather.hum}}</span>
                      </div>
                    </div>
                    <hr>
                    <div class="weatherBox">
                      <div class="weatherText">
                        <span style="border-right: 1px solid darkgrey;padding-right:15px">国家：{{olympic.country}}</span>
                        <span style="border-right: 1px solid darkgrey;padding-right:15px">金牌：{{olympic.gold}}</span>
                        <span style="border-right: 1px solid darkgrey;padding-right:15px">银牌：{{olympic.silver}}</span>
                        <span>铜牌：{{olympic.bronze}}</span>
                      </div>
                    </div>

                  </div>

                </div>
            </div>
        </div>
    </div>


</template>


<script>
  import axios from 'axios'
  import qs from 'qs'

  import MyHeader from './TodoList/MyHeader'
  import MyList from './TodoList/MyList'
  import MyFooter from './TodoList/MyFooter'


  export default {
      name: 'Main',
      components: {
          MyHeader,MyList,MyFooter
      },
        data() {
            return {
              ip:'',

              token:'',//从页面缓存取到的token值
              term:'2',
              week:'2',
              weekText:'第2周',
              weather:{
                city:'',//天气城市
                temp:'',//天气温度
                hum:'',//天气湿度
              },

              olympic:{
                country:'',
                flag:'',
                gold:'',
                silver:'',
                bronze:''
              },
              notice:{
                noticeTitle:[],
                noticeText:[],
              },
              //公告栏标题
              todos:JSON.parse(localStorage.getItem('todos')) || [],//todoList相关
                tableData: [{//课表内容
                    Section:'1~2',
                    Monday:'',
                    Tuesday:'',
                    Wednesday:'',
                    Thursday:'',
                    Friday:'',
                    Saturday:'',
                    Sunday:'操作系统\n二教107',
                }, {
                    Section:'3~4',
                    Monday:'',
                    Tuesday:'',
                    Wednesday:'',
                    Thursday:'',
                    Friday:'',
                    Saturday:'',
                    Sunday:'',
                }, {
                    Section:'5~6',
                    Monday:'',
                    Tuesday:'',
                    Wednesday:'',
                    Thursday:'',
                    Friday:'',
                    Saturday:'',
                    Sunday:'',
                }, {
                    Section:'7~8',
                    Monday:'',
                    Tuesday:'',
                    Wednesday:'',
                    Thursday:'',
                    Friday:'',
                    Saturday:'',
                    Sunday:'',
                },{
                    Section:'9~11',
                    Monday:'',
                    Tuesday:'',
                    Wednesday:'',
                    Thursday:'',
                    Friday:'',
                    Saturday:'',
                    Sunday:'',
                }]
            }
        },
    methods:{
        decWeek(){
          if(this.week > 1){
            this.week--
            this.weekText = '第' + this.week + '周'
            axios.get((this.ip + '/stuCourse/table/' + this.week)).then((response)=>{
              console.log(response)
              console.log(response.data)

              for(let i=0;i<5;i++){
                this.tableData[i].Monday='';
                this.tableData[i].Tuesday='';
                this.tableData[i].Wednesday='';
                this.tableData[i].Thursday='';
                this.tableData[i].Friday='';
                this.tableData[i].Saturday='';
                this.tableData[i].Sunday='';
              }

              for( var i=0;i<response.data.length;i++){
                let wk = (response.data[i].week)
                let section = (response.data[i].section)-1
                let weekday = ''
                if (wk === 1){
                  this.tableData[section].Monday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
                }else if(wk === 2){
                  this.tableData[section].Tuesday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
                }else if(wk === 3){
                  this.tableData[section].Wednesday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
                }else if(wk === 4){
                  this.tableData[section].Thursday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
                }else if(wk === 5){
                  this.tableData[section].Friday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
                }else if(wk === 6){
                  this.tableData[section].Saturday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
                }else if(wk === 7){
                  this.tableData[section].Sunday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
                }
                console.log(weekday)
              }
            }).catch(function (error) {
              console.log(error);
            });
          }else{
            this.week = 1
            this.weekText = '第1周'
          }


        },
        incWeek(){
          this.week++
          this.weekText = '第' + this.week + '周'
          axios.get((this.ip + '/stuCourse/table/' + this.week)).then((response)=>{
            console.log(response)
            console.log(response.data)

            for(let i=0;i<5;i++){
              this.tableData[i].Monday='';
              this.tableData[i].Tuesday='';
              this.tableData[i].Wednesday='';
              this.tableData[i].Thursday='';
              this.tableData[i].Friday='';
              this.tableData[i].Saturday='';
              this.tableData[i].Sunday='';
            }

            for( var i=0;i<response.data.length;i++){
              let wk = (response.data[i].week)
              let section = (response.data[i].section)-1
              let weekday = ''
              if (wk === 1){
                this.tableData[section].Monday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
              }else if(wk === 2){
                this.tableData[section].Tuesday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
              }else if(wk === 3){
                this.tableData[section].Wednesday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
              }else if(wk === 4){
                this.tableData[section].Thursday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
              }else if(wk === 5){
                this.tableData[section].Friday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
              }else if(wk === 6){
                this.tableData[section].Saturday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
              }else if(wk === 7){
                this.tableData[section].Sunday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
              }
              console.log(weekday)
            }
          }).catch(function (error) {
            console.log(error);
          });
        },
        // //获取天气数据axios代码段(已弃用)
        // getWeather(){
        //   axios.get('api/api?version=v6&appid=21375891&appsecret=fTYv7v5E&city=%E6%88%90%E9%83%BD').then(
        //
        //   this.$jsonp('http://www.weather.com.cn/data/sk/101270101.html'
        //     ).then((response)=>{
        //       console.log(response);
        //       console.log(response.data)
        //   }))
        // },
      toAdmin(){
        window.location.href='/admin.html'
      },
      toLibrary(){
        window.location.href='/library.html#/Init'
      },
      addToDo(todoObj){
        this.todos.unshift(todoObj)
      },
      checkToDo(id){
        this.todos.forEach((itemText)=>{
          if (itemText.id === id ){
            itemText.done = !itemText.done
          }
        })
      },
      deleteToDo(id){
        console.log('deleteToDo执行了')
        this.todos = this.todos.filter(itemText =>itemText.id !== id)
      },
      checkAllToDo(done){
        this.todos.forEach((itemText)=>{
          itemText.done = done
        })
      },
      clearAllToDo(){
        this.todos = this.todos.filter((itemText)=>{
          return !itemText.done
        })
      }
    },
    watch:{
      todos:{
        deep:true,
        handler(value){
          localStorage.setItem('todos',JSON.stringify(value))
        }
      }
    },
    beforeMount(){

    },
    mounted() {
      this.ip = localStorage.getItem('ip');


      //初始化页面获取公告信息
      axios.defaults.headers.common["token"] = this.token;
      axios.get((this.ip + '/bulletin/1')).then((response)=>{
        console.log(response)
        this.notice.noticeTitle.push(response.data.noticeTitle)
        this.notice.noticeText.push(response.data.notice)
      }).catch(function (error) {
        console.log(error);
      });
      axios.defaults.headers.common["token"] = this.token;
      axios.get((this.ip + '/bulletin/2')).then((response)=>{
        console.log(response)
        this.notice.noticeTitle.push(response.data.noticeTitle)
        this.notice.noticeText.push(response.data.notice)

      }).catch(function (error) {
        console.log(error);
      });

      //用户未登录禁止访问其他页面
        if(sessionStorage.getItem('token') === null){
          window.location.href='/sign.html'
        }

        //天气模块的axios请求代码段
      axios.get('api/101270101.html').then(
        (response)=>{
          console.log('请求成功了',response)
          console.log(response.data)
          this.weather.city = response.data.weatherinfo.city
          this.weather.temp = '温度：' + response.data.weatherinfo.temp + '℃'
          this.weather.hum = '湿度：' + response.data.weatherinfo.SD
        }).catch(function (error) {
        console.log('请求失败了',error.message);
      });

      //奥运奖牌模块代码段
      axios.get('Api/?appid=43656176&appsecret=I42og6Lm').then(
        (response)=>{
          console.log('请求成功了',response)
          console.log(response.data)
          this.olympic.country = response.data.list[0].country
          this.olympic.flag = response.data.list[0].flag
          this.olympic.gold = response.data.list[0].jin
          this.olympic.silver = response.data.list[0].yin
          this.olympic.bronze = response.data.list[0].tong
        }).catch(function (error) {
        console.log('请求失败了',error.message);
      });



      //获取页面的SessionStorage
      this.token = sessionStorage.getItem('token')
      console.log('Main获取的token',this.token)
      //课表模块的axios请求代码段
      axios.defaults.withCredentials = true;

      //初始化页面获取课表信息
      axios.defaults.headers.common["token"] = this.token;
      axios.get((this.ip + '/stuCourse/table/' + this.week)).then((response)=>{
        console.log(response)
        console.log(response.data)

        for(let i=0;i<5;i++){
          this.tableData[i].Monday='';
          this.tableData[i].Tuesday='';
          this.tableData[i].Wednesday='';
          this.tableData[i].Thursday='';
          this.tableData[i].Friday='';
          this.tableData[i].Saturday='';
          this.tableData[i].Sunday='';
        }

        for( var i=0;i<response.data.length;i++){
          let wk = (response.data[i].week)
          let section = (response.data[i].section)-1
          let weekday = ''
          if (wk === 1){
            this.tableData[section].Monday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
          }else if(wk === 2){
            this.tableData[section].Tuesday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
          }else if(wk === 3){
            this.tableData[section].Wednesday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
          }else if(wk === 4){
            this.tableData[section].Thursday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
          }else if(wk === 5){
            this.tableData[section].Friday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
          }else if(wk === 6){
            this.tableData[section].Saturday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
           }else if(wk === 7){
             this.tableData[section].Sunday = response.data[i].name + '\n' + response.data[i].clazzRoomAddr
           }
           console.log(weekday)
         }
       }).catch(function (error) {
         console.log(error);
       });


     }

  }
</script>


<style>
    .search-query {
      width:450px;
      height: 30px;
      line-height: 30px;
      box-sizing: border-box;
      padding: 0 15px 0 30px;
      border: 2px solid #e3e3e3;
      color: #273849;
      outline: none;
      border-radius: 15px;
      margin-right: 10px;
      transition: border-color 0.2s ease;
      background: #fff url("../pages/home/assets/search.png") 8px 5px no-repeat;
      background-size: 20px;
      vertical-align: middle !important;
    }
    .search-query:focus {
      border-color: rgba(5, 161, 206, 0.99);
    }
    .labelStyle{
      height:50px
    }
    .body{
      display: flex;
      flex-direction:row;
      background-color:#f0f1f9;
      min-height:1000px;
      padding:10px;
    }
    .noticeBox{
      display:flex;
      flex-direction: column;
      padding:5px;
      margin-right: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
      min-height:950px;
      width:560px;
    }
    .noticeBoxTitle{
      text-align:center;
      height:55px;
      float: top;
      color:#fff;
      font-size:30px;
      background-color:#3f51b5;
      line-height:53px
    }
    .noticeBoxTitle:hover{
      background-color: #7288e3;
    }
    .noticeTitle{
      height:50px;
      width: auto;
      background-color: rgb(247, 248, 252);
      text-align: center;
      line-height: 50px;
      font-size:20px;
      font-weight:bold;

    }
    .notices{
      height:444px;
      width:auto;
      padding:5px 5px 0 5px;
      margin-bottom: 10px;
      box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
    }
    .noticeText{
      padding:5px
    }
    .functionBox{
      display:flex;
      flex-direction:column;
      padding:5px;
      width:1260px;
      min-height:1000px;
      /*border:1px solid black*/

    }
    .funcTop{
      display:flex;
      align-items: stretch;
      height:470px;
      /*border:1px solid darkgray;*/

    }

    .funcTopLeft{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      align-items: center;
      padding:15px;
      margin-right: 10px;
      width:930px;
      background-color: #f6f6f6;
      box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15);
      /*border:2px solid #e5e5e5;*/

    }
    .functions{
      background-color: #f5f6fa;
      width:270px;
      height:100px;
      /*border:1px solid darkgray;*/
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      line-height: 100px;
      font-size:23px;
    }
    .functions:hover{
      background-color: rgb(222, 239, 253);
      box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
    }
    .icon{
    }
    .funcTopRight{
      padding:10px;
      width:930px;
      border:1px solid darkgray;

    }
    .searchBorder{
      border-radius: 30px;
      border:1px solid #0a53be;
    }

    .funcBottom{
      display:flex;
      justify-content:space-between;
      height:390px;
      /*border:1px solid darkgray;*/
    }
    .funcBottomLeft{
      display:flex;
      flex-direction: column;
      padding:17px 12px 12px 0px;
      width:1200px;
      height:510px;
      /*white-space:pre-line;*/
      /*border:1px solid darkgray;*/
    }
    .classHeader{
      display:flex;
      justify-content: center;
      background-color: #3f51b5;
      color:#fff;
      width:auto;
      height:30px;
      line-height: 30px;
      padding:0;
      margin:2px;
    }
    .el-table td, .el-table th{
      padding:8px;
      min-width:100px;
      text-align:center;
      /*width:100px;*/
    }
    .funcBottomRight{
      width:930px;
      /*border:1px solid darkgray;*/
    }
    .weatherBox{
      height:80px;
      padding:0 5px 0 5px;
      background-color: #f5f6fa;
    }
    .weatherBox:hover{
      background-color: rgb(222, 239, 253);
      box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
    }
    .weatherText{
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
      height:80px;

    }

    .btn {
      display: inline-block;
      padding: 4px 12px;
      margin-bottom: 0;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
    }

    .btn-danger {
      color: #fff;
      background-color: #da4f49;
      border: 1px solid #bd362f;
    }

    .btn-danger:hover {
      color: #fff;
      background-color: #bd362f;
    }

    .btn:focus {
      outline: none;
    }

    .todo-container {
      width: 600px;
      margin: 0 auto;
    }
    .todo-container .todo-wrap {
      font-size: 18px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }

</style>
